<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/swiper/swiper-bundle.min.css">
    <script src="/swiper/swiper-bundle.min.js"></script>
    <script src="/jquery/jquery.min.js"></script>
</head>
<style>
    .swiper {
        width: 600px;
        height: 300px;
    }

    .swiper-slide {
        width: 600px;
        height: 300px;
    }

    .swiper-slide>img {
        width: 600px;
        height: 300px;
    }
</style>

<body>
    <div class="swiper ">
        <div class="swiper-wrapper">

        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev "></div>
        <div class="swiper-button-next "></div>
    </div>
    <script>
        function show() {
            $.ajax({
                url: "/jquery/getImgs",
                success: function (data) {
                    let str = "";
                    data.forEach(function (item, index) {

                        str += `
                                <div class="swiper-slide"><img src='/imgs/${item}'></div>
                        `;
                    });
                    $(".swiper-wrapper").html(str);

                    new Swiper(".swiper", {
                        direction: "horizontal",
                        // autoplay: true,//自动播放
                        autoplay: {
                            delay: 1000,//一秒轮播一次
                            stopOnLastSlide: true,//是否停留在最后一个滑块
                            disableOnInteraction: true,//如果操作了当前的滑块，就会停止
                        },
                        // loop: true,//循环模式
                        navigation: {//前后按钮的设置
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                        pagination: {//分页器的配置
                            el: '.swiper-pagination',
                            clickable: true,
                        },

                    });

                }
            });
        }
        show();

        async function show() {
            let data = await $.ajax("/jquery/getImgs").promise();
            let str = "";
            data.forEach(function (item, index) {
                str += `
                                <div class="swiper-slide"><img src='/imgs/${item}'></div>
                        `;
            });
            $(".swiper-wrapper").html(str);

            new Swiper(".swiper", {
                direction: "horizontal",
                autoplay: {
                    delay: 1000,//一秒轮播一次
                    stopOnLastSlide: true,//是否停留在最后一个滑块
                    disableOnInteraction: true,//如果操作了当前的滑块，就会停止
                },

                navigation: {//前后按钮的设置
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                pagination: {//分页器的配置
                    el: '.swiper-pagination',
                    clickable: true,
                },

            });

        }
        show();
    </script>
</body>

</html>